import React, { Component } from 'react';
import { View } from '@tarojs/components'
import {vcmonitor} from "../../utils/tools";
import { CerEditLog } from '../../utils/server.interface'
import { http } from '../../utils/http'
import { GET_CREDIT_LOG } from '../../constants/api'
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './rule.scss'

interface PageType {
  limit: number
  loadMoreStatus: "more" | "loading" | "noMore"
  recordList: CerEditLog[]
}
export default class Log extends Component {
  state: PageType = {
    limit: 10,
    loadMoreStatus: 'loading',
    recordList: []
  }
  async onReachBottom() {
    if(this.state.loadMoreStatus != 'noMore') {
      this.setState({ loadMoreStatus: 'loading'})
      this.page++
      const recordList = await this.getData(this.page)
      const old = this.state.recordList
      if(recordList){
        this.setState({recordList: [...old, ...recordList]})
      }

    }
  }
  page = 1
  async componentDidShow(){
    vcmonitor(this)
    const recordList = await this.getData(this.page)
    this.setState({recordList})
  }
  async getData(page) {
    const limit = this.state.limit
    const recordList = await http.carGet<CerEditLog[]>(GET_CREDIT_LOG, {page: page,limit})

    if(recordList && recordList.length >= limit){
      this.setState({ loadMoreStatus: 'more'})
    } else {
      this.setState({ loadMoreStatus: 'noMore'})
    }
    return recordList
  }
  render() {
    const {  loadMoreStatus, recordList } = this.state
    return(
      <View className='rule-page-root'>
        <GzhAuth />
        {recordList.map(item => <View key={item.id} className='item'>
          <View  className='title'>{item.type==3?'授信还款：'+item.subject:item.subject}
            <View className='time'>{item.add_date}</View></View>
          <View className={item.money<0?"total_amount":"total_amount yellow"}>{item.money}</View>
        </View>)}
      </View>
    )
  }
}
